<template>
	<view class="plandetails-warp">

		<view class="search-wrap">
			<view class="search-inner" style="padding: 0 30rpx;box-sizing: border-box;">
				<view class="search-row">
					<view class="search-label">改造部门</view>
					<view class="search-content">
						<view class="select-bar">
							<u-input v-model="selectValue1" type="select" border="1px"  @click="handlClickSelect" :custom-style="customStyle"/>
						</view>
						<u-select v-model="show" mode="mutil-column-auto" :list="list" @confirm="confirm"></u-select>
					</view>
				</view>
				<view class="search-row">
					<view class="search-label">改造类别</view>
					<view class="search-content">
						<view class="select-bar">
							<u-input v-model="selectValue2" type="select" border="1px"  @click="handlClickSelect2" :custom-style="customStyle"/>
						</view>
						<u-select v-model="show2" mode="mutil-column-auto" :list="list2" @confirm="confirm2"></u-select>
					</view>
				</view>
				<view class="search-row">
					<view class="search-label">改造进度</view>
					<view class="search-content">
						<view class="select-bar">
							<u-input v-model="selectValue3" type="select" border="1px"  @click="handlClickSelect3" :custom-style="customStyle"/>
						</view>
						<u-select v-model="show3" mode="mutil-column-auto" :list="list3" @confirm="confirm3"></u-select>
					</view>
				</view>
			</view>
		</view>
		<ScrollViewComponent>
			<view class="plandetails-background-top">
				<view class="plandetails-card">
					<!-- <view class="card-row-first">

						<view class="zhuangt">
							<text class="zhuangt-font">待阅</text>
						</view>
					</view> -->
					<view class="card-row-main">
						<view class="card-row-main-info">
							<view class="main-title">单位编号</view>
							<view class="main-info">ABC1234567897897</view>
						</view>
						<view class="card-row-main-info">
							<view class="main-title">单位名称</view>
							<view class="main-info">事件小类事件小类事件小类事件小类事件小类事件小类事件小类事件小类</view>
						</view>
						<view class="card-row-main-info" style="margin-bottom: 10rpx;">
							<view class="main-title">单位类别</view>
							<view class="main-info">事件位置</view>
						</view>
						<view class="card-row-main-info">
							<view class="main-title">改造进度</view>
							<view class="main-info">事件描述</view>
						</view>
					</view>
				</view>
			</view>
		</ScrollViewComponent>
	</view>
</template>

<script>
	import ScrollViewComponent from '@/components/scroll-view-component/index.vue'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#1FC186',
				},
				customStyle:{
					minHeight:"30px"
				},
				show: false,
				show2: false,
				show3: false,
				selectValue1:'',
				selectValue2:'',
				selectValue3:'',
				list: [{
						value: 1,
						label: '中国',
						children: [{
								value: 2,
								label: '广东',
								children: [{
										value: 3,
										label: '深圳'
									},
									{
										value: 4,
										label: '广州'
									}
								]
							},
							{
								value: 5,
								label: '广西',
								children: [{
										value: 6,
										label: '南宁'
									},
									{
										value: 7,
										label: '桂林'
									}
								]
							}
						]
					},
					{
						value: 8,
						label: '美国',
						children: [{
							value: 9,
							label: '纽约',
							children: [{
								value: 10,
								label: '皇后街区'
							}]
						}]
					}
				],
				list2: [{
						value: 1,
						label: '水',
					},
					{
						value: 2,
						label: '电',
					
					},
					{
						value: 3,
						label: '气',
					
					},
					{
						value:4,
						label: '顾',
					
					}
				],
				list3: [{
						value: 1,
						label: '正在改造',
					},
					{
						value: 2,
						label: '改造中',
					},
					{
						value: 3,
						label: '已完成',
					}
				]
			}
		},
		methods: {
			getList(list) {
				console.log(list);
				this.list = list
			},
			handlClickSelect(e){
				this.show = true;
			},
			handlClickSelect2(e){
				this.show2 = true;
			},
			handlClickSelect3(e){
				this.show3 = true;
			},
			confirm(e) {
				console.log(e);
				this.selectValue1 = e[0].label+'-'+e[1].label+'-'+e[2].label
			},
			confirm2(e) {
				console.log(e);
				this.selectValue2 = e[0].label
			},
			confirm3(e) {
				console.log(e);
				this.selectValue3 = e[0].label
			}
		},
		components: {
			ScrollViewComponent
		}
	}
</script>

<style>
	.plandetails-warp {
		width: 100%;
		min-height: 100%;
		background: rgba(243, 243, 243, 1);
		padding-bottom: 100rpx;
	}

	.plandetails-background-top {
		width: 100%;
		/*height:189rpx;*/
		/*background:rgba(31,193,134,1);*/
		position: relative;

	}

	.plandetails-card {
		width: 94%;
		height: auto;
		/*background:url(../../static/img/plandetails-card.png) no-repeat;*/
		/*background-size: 100% 100%;*/
		/*background: linear-gradient(45deg, rgb(64, 158, 255), rgba(64, 158, 255, 0.7));*/
		background: rgba(255, 255, 255, .8);
		box-shadow: 0rpx 4rpx 20rpx 0rpx rgba(64, 158, 255, 0.4);
		border-radius: 12rpx;
		overflow: hidden;
		margin: 0 auto 30rpx;
	}

	.card-row-first {
		display: flex;
		justify-content: flex-end;
		align-items: center;
		width: 100%;
		height: 74rpx;
		padding: 0 36rpx;
		border-bottom: 1px dashed #EFEFEF;
		background: linear-gradient(45deg, rgb(64, 158, 255), rgba(64, 158, 255, 0.7));
		color: #fff;
	}

	.img-people {
		width: 28rpx;
		height: 36rpx;
		margin-right: 18rpx;
	}

	.zhuangt {
		width: 148rpx;
		height: 40rpx;
		background: rgba(255, 216, 174, 1);
		border-radius: 20rpx;
		text-align: center;
	}

	.zhuangt-font {
		width: 72rpx;
		height: 34rpx;
		font-size: 24rpx;
		font-family: PingFang-SC-Bold, PingFang-SC;
		font-weight: bold;
		color: rgba(223, 137, 37, 1);
		line-height: 34rpx;
	}

	.card-row-main {
		width: 100%;
		padding: 20rpx 36rpx;
	}

	.card-row-main-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		height: 52rpx;
		font-size: 28rpx;
		line-height: 52rpx;
		font-weight: 500;
		color: rgba(59, 59, 59, .8);
	}

	.main-title {
		width: 30%;
		position: relative;
		padding-left: 20rpx;
	}

	.main-title::before {
		width: 6rpx;
		height: 6rpx;
		content: "";
		background: #409eff;
		position: absolute;
		top: 20rpx;
		left: 7rpx;
		border-radius: 50%;
	}

	.main-info {
		width: 70%;
		flex: 1;
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
		text-align: right;
	}

	.plandetails-background-bottom {
		margin-top: 290rpx;
		display: flex;
		justify-content: space-between;
		padding: 0 36rpx;

	}

	.anniu {
		width: 330rpx;
		height: 82rpx;
		line-height: 82rpx;
		background: linear-gradient(180deg, rgba(23, 195, 132, 1) 0%, rgba(33, 206, 143, 1) 100%);
		border-radius: 41rpx;
		font-size: 28rpx;
		font-weight: 500;

		color: rgba(255, 255, 255, 1);
	}

	.btn-jiancha {
		background: linear-gradient(180deg, rgba(243, 162, 68, 1.0) 0%, rgba(234, 143, 38, 1.0) 100%);
	}

	.navbar-right {
		margin-right: 6rpx;
		display: flex;
	}

	.right-item {
		margin: 0 6rpx;
		position: relative;
		color: #ffffff;
		display: flex;
	}

	.search-wrap {
		width: 100%;
		background-color: #fff;
		overflow: hidden;
		margin-bottom: 30rpx;
	}

	.search-row {
		display: flex;
		padding: 10rpx 30rpx;
		line-height: 60rpx;
		border-bottom: 1px solid #eeeeee;
		justify-content: space-between;
	}

	.search-label {
		width: 25%;

	}

	.search-content {
		width: 65%;
		display: flex;
		justify-content: space-between;
	}

	.search-btns {
		width: 100%;
		padding: 30rpx 20rpx;
		display: flex;
		justify-content: space-between;
	}

	.search-btn {
		width: 45%;
		height: 68rpx;
		line-height: 68rpx;
		color: #fff;
		text-align: center;
		border-radius: 10rpx;
		background-color: #409eff;
	}

	.down-up {
		text-align: center;
		margin: 10rpx;
	}
	.select-bar{
		width: 100%;
		height: 100%;
		float: right;
	}
</style>
